<extend name="public@base5"/>
<block name="head">
    <include file="theme/functions"/>
    <style>
        .form-control-widget-title {
            border: none;
            padding: 0;
            margin: 0;
            font-size: inherit;
            line-height: inherit;
            background: transparent;
        }

        .form-control-widget-title:focus {
            outline: none;
            background: #fff;
        }
    </style>
</block>
<block name="main">
    <div class="wrap">
        <div class="position-relative">
            <ul class="nav nav-tabs">
                <li class="nav-item">
                    <a class="nav-link active">{:lang('SETTING')}</a>
                </li>
            </ul>
        </div>

        <form method="post" class="js-ajax-form margin-top-20"
              action="admin/theme/widget/setting">
            <div class="card">
                <div class="card-header">
                    <input class="form-control-widget-title" type="text" value="{$widget.title}"
                           name="widget[title]">

                    <div class="form-check form-check-inline float-end" style="margin: 0;min-height: auto;">
                        <php>$display_checked=empty($widget['display'])?'':'checked';</php>
                        <input class="form-check-input" type="checkbox" id="widget-display-check"
                               name="widget[display]"
                               value="1"
                               {$display_checked}>
                        <label class="form-check-label" for="widget-display-check">{:lang('DISPLAY')}</label>
                    </div>
                </div>
                <div class="card-body">
                    <div>
                        <!-- Nav tabs -->
                        <ul class="nav nav-tabs" role="tablist">
                            <li role="presentation" class="nav-item">
                                <a class="nav-link active" href="javascript:" data-bs-toggle="tab"
                                   data-bs-target="#home" aria-controls="home" role="tab" data-toggle="tab">{:lang('Attributes')}</a>
                            </li>
                            <li role="presentation" class="nav-item">
                                <a class="nav-link" href="javascript:" data-bs-toggle="tab" data-bs-target="#profile"
                                   aria-controls="profile" role="tab" data-toggle="tab">{:lang('Cascading Style Sheets')}</a>
                            </li>
                        </ul>
                        <!-- Tab panes -->
                        <div class="tab-content">
                            <div role="tabpanel" class="tab-pane active" id="home">
                                <br>
                                {:_parse_vars($widget['vars'],'widget[vars]',2)}
                            </div>
                            <div role="tabpanel" class="tab-pane" id="profile">
                                <br>
                                {:_parse_vars($widget['css'],'widget[css]',2)}
                            </div>
                        </div>
                    </div>
                    <div style="display: none;">
                        <input type="hidden" name="admin_content_lang" value="{:cmf_current_home_lang()}"/>
                        <input type="hidden" name="file_id" value="{$file_id}"/>
                        <input type="hidden" name="widget_id" value="{$widget_id}"/>
                        <input type="hidden" name="block_name" value="{$block_name}"/>
                        <button type="submit" class="js-ajax-submit" data-refresh="0" id="submit-btn">{:lang('SAVE')}
                        </button>
                    </div>
                </div>
            </div>

        </form>

    </div>
</block>
<block name="scripts">
    <include file="theme/scripts"/>
</block>
